<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todo</title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="root">
        <div><input type="text" v-model="todoValue">
              <button @click="handleBtnClick">提交</button>
        </div>
        <todo-item :content="item"  :index="index" v-for="(item, index)  in list" @delete="handleItemDelete">
        </todo-item>
    </div>
    <script>
        var  TodoItem = {
          props:['content','index'],
          template:"<li @click='handleItemClick'>{{content}}</li>",
          methods: {
            handleItemClick:function (){
                this.$emit("delete",this.index);
            }
          }
        }

      var app =  new Vue({
          el:'#root',
          data:{
          todoValue:"",
          list:[]
          },
          components:{
            TodoItem:TodoItem,
          },
          methods:{
            handleBtnClick:function (){
              this.list.push(this.todoValue)
              this.todoValue = ""
            },
              handleItemDelete :function (index){
                    this.list.splice(index,1)
                //this.list = []
              }
          }
        })
    </script>
</body>
</html>